<template>
  <view class="vaccine-detail">
    <u-loading-icon text="加载中" textSize="18" v-if="loading"></u-loading-icon>
    <view class="header-info" v-if="!loading">
      <view class="vaccine-name">{{ vaccine.vaccine_name }}</view>
      <view class="vaccine-alias">{{ vaccine.vaccine_alias }}</view>
      <view class="info-item">
        <span class="hint">接种对象</span>
        <span class="info">{{ vaccine.inoculation_targets }}</span>
      </view>
      <view class="info-item">
        <span class="hint">疫苗类别</span>
        <span class="info">{{ vaccine.vaccine_species }}</span>
      </view>
      <view class="info-item">
        <span class="hint">处方类型</span>
        <span class="info">{{ vaccine.prescription_type }}</span>
      </view>
    </view>

    <view class="vaccine-baike" v-if="!loading">
      <view class="title">疫苗百科</view>
      <view class="container">
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">成分</view>
        </view>
        <view class="label">{{ vaccine.vaccine_ingredients }}</view>
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">功能主治</view>
        </view>
        <view class="label">{{ vaccine.vaccine_function }}</view>
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">规格型号</view>
        </view>
        <view class="label">{{ vaccine.specifications }}</view>
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">用法用量</view>
        </view>
        <view class="label">{{ vaccine.usage_dosage }}</view>
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">不良反应</view>
        </view>
        <view class="label">{{ vaccine.adr }}</view>
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">使用禁忌</view>
        </view>
        <view class="label">{{ vaccine.taboo }}</view>
        <view class="header">
          <view class="bar"></view>
          <view class="header-name">注意事项</view>
        </view>
        <view class="label">{{ vaccine.announcement }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryVaccineDetailById } from "@/api";
export default {
  data() {
    return {
      vaccine: {},

      loading: true,
    };
  },

  components: {},

  async mounted() {
    this.loading = true;
    let id = this.$scope.options.id;
    //  查数据
    let result = await queryVaccineDetailById(id);
    this.vaccine = result.data[0];
    this.loading = false;
  },
};
</script>

<style lang='scss' scoped>
.vaccine-detail {
  .header-info {
    padding: 40rpx;
    background: #fff;
    .vaccine-name {
      font-size: 40rpx;
      font-weight: bold;
    }
    .vaccine-alias {
      font-size: 30rpx;
      margin-top: 10rpx;
      margin-bottom: 30rpx;
    }
    .info-item {
      display: flex;
      margin-top: 30rpx;
      font-size: 28rpx;
      .hint {
        white-space: nowrap;
        color: #666;
      }
      .info {
        margin-left: 30rpx;
      }
    }
  }

  .vaccine-baike {
    margin-top: 40rpx;
    background: #fff;
    padding: 40rpx;
    .title {
      font-size: 38rpx;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    }
    .container {
      margin-top: 40rpx;
      .header {
        display: flex;
        align-items: center;
        .bar {
          margin-right: 20rpx;
          background: $themeColor1;
          width: 10rpx;
          height: 40rpx;
          border-radius: 88rpx;
        }
        .header-name {
          font-size: 36rpx;
          font-weight: bold;
        }
      }
      .label {
        margin-top: 20rpx;
        font-size: 30rpx;
        margin-bottom: 40rpx;
        line-height: 50rpx;
      }
    }
  }
}
</style>